<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="temp.css">
    <script src="ext/jquery-1.11.3.js"></script>
    <script src="ext/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
    <div class="logo">
        <a href=""><i class="ic ic-logo"></i></a>
    </div>
    <span class="plat-name">四川省文化馆内容管理平台</span>
    <ul class="header-nav">
        <li><span>超级管理员</span></li>
        <li><a href="##">退出</a></li>
    </ul>
</div>
<div class="main">
    <div class="aside menu">
        <div class=""><a href="">推荐页管理</a></div>
        <div class=""><a href="">视频管理</a></div>
        <div class=""><a href="">咨询管理</a></div>
        <div class=""><a href="">栏目管理</a></div>
        <div class=""><a href="">发布审核</a></div>
        <div class=""><a href="">数据分析</a></div>
        <div class="collapsed" data-toggle="collapse" href=".sec-level1">账号权限</div>
        <div class="collapse sec-level1">
            <div class="sec-level"><a href=""><i class="ic ic-dotblue"></i><span>角色</span></a></div>
            <div class="sec-level"><a href=""><i class="ic ic-dotblue"></i><span>管理员</span></a></div>
        </div>
    </div>
    <div class="main-content">
        <div class="wrapper">
            <!--title-->
            <div class="content-title">
                <!--面包屑-->
                <ol class="breadcrumb">
                    <li>推荐页管理</li>
                    <li>编辑</li>
                    <li class="active">关联内容</li>
                </ol>
                <a class="btn btn-add pull-right" href=""><i class="ic ic-plus"></i><span>添加按钮</span></a>
            </div>
            <!--列表-->
            <div>
                <h1>列表</h1>
                <div class="list shadow clearfix">
                    <ul class="list-head">
                        <li class="item-check"></li>
                        <li class="item-id">ID</li>
                        <li class="item-name">名称</li>
                        <li class="item-img">图片</li>
                        <li class="item-time">时间</li>
                        <li class="item-operate">操作</li>
                    </ul>
                    <ul class="list-item">
                        <li class="item-check"><input type="checkbox"></li>
                        <li class="item-id">ID</li>
                        <li class="item-name">名称</li>
                        <li class="item-img"><img src="img-item.jpg" alt=""></li>
                        <li class="item-time">时间</li>
                        <li class="item-operate">
                            <a href=""><i class="ic ic-edit"></i></a>
                            <a href=""><i class="ic ic-info"></i></a>
                            <a href=""><i class="ic ic-up"></i></a>
                            <a href=""><i class="ic ic-down"></i></a>
                            <a href=""><i class="ic ic-delete"></i></a>
                        </li>
                        <li class="line"></li>
                    </ul>
                    <ul class="list-item">
                        <li class="item-check"><input type="checkbox"></li>
                        <li class="item-id">ID</li>
                        <li class="item-name">名称</li>
                        <li class="item-img"><img src="img-item.jpg" alt=""></li>
                        <li class="item-time">时间</li>
                        <li class="item-operate">
                            <a href=""><i class="ic ic-edit"></i></a>
                            <a href=""><i class="ic ic-info"></i></a>
                            <a href=""><i class="ic ic-up"></i></a>
                            <a href=""><i class="ic ic-down"></i></a>
                            <a href=""><i class="ic ic-delete"></i></a>
                        </li>
                        <li class="line"></li>
                    </ul>
                    <ul class="list-item">
                        <li class="item-check"><input name="radio" type="radio"></li>
                        <li class="item-id">ID</li>
                        <li class="item-name">名称</li>
                        <li class="item-img"><img src="img-item.jpg" alt=""></li>
                        <li class="item-time">时间</li>
                        <li class="item-operate">
                            <a href=""><i class="ic ic-edit"></i></a>
                            <a href=""><i class="ic ic-info"></i></a>
                            <a href=""><i class="ic ic-up"></i></a>
                            <a href=""><i class="ic ic-down"></i></a>
                            <a href=""><i class="ic ic-delete"></i></a>
                        </li>
                        <li class="line"></li>
                    </ul>
                    <ul class="list-item">
                        <li class="item-check"><input name="radio" type="radio"></li>
                        <li class="item-id">ID</li>
                        <li class="item-name">名称</li>
                        <li class="item-img"><img src="img-item.jpg" alt=""></li>
                        <li class="item-time">时间</li>
                        <li class="item-operate">
                            <a href=""><i class="ic ic-edit"></i></a>
                            <a href=""><i class="ic ic-info"></i></a>
                            <a href=""><i class="ic ic-up"></i></a>
                            <a href=""><i class="ic ic-down"></i></a>
                            <a href=""><i class="ic ic-delete"></i></a>
                        </li>
                        <li class="line"></li>
                    </ul>
                    <div class="list-footer">
                        <div class="choice">
                            <a href="javascript:;" class="checkall">全选</a>
                            <a href="javascript:;" class="uncheck">不选</a>
                            <a href="javascript:;" class="reverse-check">反选</a>
                        </div>
                        <div class="list-operate">
                            <a class="btn btn-down" href=""><span>批量下线</span></a>
                            <a class="btn btn-delete" href=""><span>批量删除</span></a>
                        </div>
                    </div>
                </div>
                <h1>关联列表</h1>
                <div class="list-relate">
                    <ul class="relate-item">
                        <li class="relate-id">888888</li>
                        <li class="relate-name">2015年度四川省文化馆党建工作述职情况报告2015年度四川省文化馆党建工作述职情况报告</li>
                        <li class="relate-img"><img src="img-item.jpg" alt=""></li>
                        <li class="relate-time">8888-88-88</li>
                        <li class="relate-operate">
                            <a href=""><i class="ic ic-delete"></i></a>
                        </li>
                    </ul>
                    <ul class="relate-item">
                        <li class="relate-id">888888</li>
                        <li class="relate-name">2015年度四川省文化馆党建工作述职情况报告2015年度四川省文化馆党建工作述职情况报告</li>
                        <li class="relate-img"><img src="img-item.jpg" alt=""></li>
                        <li class="relate-time">8888-88-88</li>
                        <li class="relate-operate">
                            <a href=""><i class="ic ic-delete"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--操作按钮-->
            <div>
                <h1>操作按钮：</h1>
                <a href=""><i class="ic ic-edit"></i></a>
                <a href=""><i class="ic ic-info"></i></a>
                <a href=""><i class="ic ic-up"></i></a>
                <a href=""><i class="ic ic-down"></i></a>
                <a href=""><i class="ic ic-delete"></i></a>
            </div>
            <!--模态框触发-->
            <div>
                <!-- Button trigger modal -->
                <a type="button" class="btn" data-toggle="modal" data-target="#myModal">
                    模态框
                </a>
            </div>
            <!--搜索-->
            <div>
                <h1>搜索</h1>
                <div class="search">
                    <input class="i786" type="text">
                    <a class="btn btn-search pull-right" href=""><i class="ic ic-search"></i><span>搜索</span></a>
                </div>
            </div>
            <!--上下线导航-->
            <div>
                <h1>上下线导航：</h1>
                <ul class="updown clearfix">
                    <li><a class="active" href="">上线</a></li>
                    <li><a class="" href="">下线</a></li>
                </ul>
            </div>
            <!--分页-->
            <div>
                <h1>分页：</h1>
                <div id="laypage" style="text-align:center;width: 932px"></div>
                <script src="ext/laypage/laypage.js"></script>
                <script>
                    laypage({
                        cont: 'laypage',
                        pages: 11,
                        groups: 7,//连续显示分页数
                        first: false, //将首页显示为数字1,。若不显示，设置false即可
                        last: false, //将尾页显示为总页数。若不显示，设置false即可
                        prev: '上一页', //若不显示，设置false即可
                        next: '下一页', //若不显示，设置false即可
                        jump: function (obj) {

                        }
                    })
                </script>
            </div>
            <!--按钮-->
            <div>
                <h1>按钮：</h1>
                <a class="btn btn-add" href=""><i class="ic ic-plus"></i><span>添加按钮</span></a>
                <a class="btn btn-search" href=""><i class="ic ic-search"></i><span>搜索</span></a>
                <br>
                <br>
                <a class="btn btn-up" href=""><span>批量上线</span></a>
                <a class="btn btn-down" href=""><span>批量下线</span></a>
                <a class="btn btn-delete" href=""><span>批量删除</span></a>
                <br>
                <br>
                <a class="btn btn-upimg" href=""><span>上传图片</span></a>
                <a class="btn btn-relate" href=""><span>关联内容</span></a>
                <a class="btn btn-submit" href=""><span>提交</span></a>
                <a class="btn btn-cancel" href=""><span>取消</span></a>
                <a class="btn btn-back" href=""><span>返回</span></a>
                <br>
                <br>
                <a class="btn btn-publish" href=""><span>正式发布</span></a>
                <a class="btn btn-notthrough" href=""><span>不通过</span></a>
                <br>
                <br>
                <a class="btn btn-review" href=""><span>发布审核</span></a>
                <a class="btn btn-reset" href=""><span>还原配置</span></a>
                <br>
                <br>
                <a class="btn btn-confirm" href="">确定</a>
                <a class="btn btn-lcancel" href="">取消</a>
            </div>
            <!--表单-->
            <div>
                <h1>表单：</h1>
                <form>
                    <div class="form-list">
                        <label><i class="ic ic-dotred"></i>视频图片</label>
                        <div class="img-ext">
                            <div id="imgdiv" class="image-preview">
                                <img style="width: 540px;height: 320px" id="imgShow" src=""/>
                            </div>
                            <div class="filebtn">
                                <a class="btn btn-upimg" href="javascript:;"><span>上传图片</span></a>
                                <em><i class="ic ic-right"></i>图片大小为540*320</em>
                                <input type="file" id="up_img" name="file_name">
                            </div>
                        </div>
                    </div>
                    <div class="form-list">
                        <label><i class="ic ic-dotred"></i>名称</label>
                        <input class="i280" type="text">
                    </div>
                    <div class="form-list">
                        <label><i class="ic ic-dotred"></i>类型</label>
                        <select class="i280">
                            <option value="">视频栏目</option>
                            <option value="">视频栏目</option>
                            <option value="">视频栏目</option>
                            <option value="">视频栏目</option>
                            <option value="">视频栏目</option>
                        </select>
                    </div>
                    <div class="form-list textarea">
                        <label class="l48">说明</label>
                        <textarea class="t594"></textarea>
                    </div>
                    <div class="form-list">
                        <label><i class="ic ic-dotred"></i>视频名称</label>
                        <input class="i280" type="text">
                    </div>
                    <div class="form-list textarea">
                        <label class="l80">说明</label>
                        <textarea class="t594"></textarea>
                    </div>
                    <div class="form-list">
                        <label><i class="ic ic-dotred"></i>管理员账号</label>
                        <input class="i280" type="text">
                    </div>
                    <div class="form-list">
                        <label class="l96">关联角色</label>
                        <select class="i280">
                            <option value="">关联角色</option>
                            <option value="">关联角色</option>
                            <option value="">关联角色</option>
                            <option value="">关联角色</option>
                            <option value="">关联角色</option>
                        </select>
                    </div>
                    <div class="form-list editor">
                        <label><i class="ic ic-dotred"></i>内容</label>
                        <!-- 加载编辑器的容器 -->
                        <script id="editor" name="content" type="text/plain" style="width:700px;height:300px;"></script>
                        <!-- 配置文件 -->
                        <script type="text/javascript" src="ext/ueditor/ueditor.config.js"></script>
                        <!-- 编辑器源码文件 -->
                        <script type="text/javascript" src="ext/ueditor/ueditor.all.js"></script>
                        <!-- 实例化编辑器 -->
                        <script type="text/javascript">
                            var ue = UE.getEditor('editor');
                        </script>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="confirm-head">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">还原配置</h4>
            </div>
            <div class="confirm-body">
                <p>还原配置后所有数据将还原至初始状态，确定要还原吗？</p>
            </div>
            <div class="confirm-foot">
                <a class="btn btn-confirm" href="">确定</a>
                <a class="btn btn-lcancel" data-dismiss="modal" href="javascript:">取消</a>
            </div>
        </div>
    </div>
</div>
<script src="ext/uploadPreview.js"></script>
<script>
    $(function(){
        new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
        $('.btn-upimg').click(function(){
            $('#up_img').trigger('click');
        })
    });
</script>
<script src="base.js"></script>
</body>
</html>